<%--
  Created by IntelliJ IDEA.
  User: chenxiaojun
  Date: 2020/6/17
  Time: 8:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>商品分类</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
<div id="root">
<Card style="margin: 20px 0" >
    <Icon type="ios-film-outline"></Icon>
    数据列表
    <i-button type="primary" @click="add":style="{float:'right'}">添加</i-button>
</Card>
    <i-table :columns="columns" :data="data" @on-selection-change="tableSelect=arguments[0]" border stripe height="500">
        <template slot-scope="{row,index}" slot="sortNumber">商品：{{row.sortNumber}}</template>
        <template slot-scope="{row,index}" slot="sortState">
            <i-switch :value="row.sortState == 0 ? false:true" @on-change="dao(row,index)" />
        </template>
        <template slot-scope="{row,index}" slot="sortDisplay">
            <i-switch :value="row.sortDisplay == 0 ? false:true" @on-change="xian(row,index)" />
        </template>
        <template slot-scope="{row,index}" slot="action">
            <i-Button type="info"  @click="update(row,index)">编辑</i-Button>
            <i-Button type="info"  @click="del(row,index)">删除</i-Button>
        </template>
    </i-table>
    <template>
        <Page :total="total1"
              :page-size="pageSize"
              :current.sync="pageNo"
              show-total
              show-sizer
              :page-size-opts="[5,10,15,20]"
              style="margin-left: 30%;"
              @on-page-size-change="pageSize=arguments[0];getList();"
              @on-change="getList"/>
    </template>
    <Modal  v-model="modaladd"  title="添加商品类别" @on-ok="doadd" @on-cancel="noupdate">
        <i-form :label-width="80">
            <Form-Item label="商品类别:">
                <i-input v-model="Sort.sortName"></i-input>
            </Form-Item>
            <Form-Item label="单位:">
                <i-input v-model="Sort.sortCompany"></i-input>
            </Form-Item>
            <Form-Item label="排序:">
                <i-input v-model="Sort.sortRow"></i-input>
            </Form-Item>
            <Form-Item label="是否显示导航栏:" :label-width="120">
                <Radio-Group v-model="Sort.sortState">
                    <Radio label="1">
                        <span>是</span>
                    </Radio>
                    <Radio label="0">
                        <span>否</span>
                    </Radio>
                </Radio-Group>
            </Form-Item>
            <Form-Item label="是否显示该类别:" :label-width="120">
                <Radio-Group v-model="Sort.sortDisplay">
                    <Radio label="1">
                        <span>是</span>
                    </Radio>
                    <Radio label="0">
                        <span>否</span>
                    </Radio>
                </Radio-Group>
            </Form-Item>
        </i-form>
    </Modal>
    <Modal  v-model="modalupdate"  title="编辑商品类别" @on-ok="doupdate" @on-cancel="noupdate">
        <i-form :label-width="80">
            <Form-Item label="商品类别:">
                <i-input v-model="Sort.sortName"></i-input>
            </Form-Item>
            <Form-Item label="商品数量:">
                <i-input disabled v-model="Sort.sortNumber"></i-input>
            </Form-Item>
            <Form-Item label="单位:">
                <i-input v-model="Sort.sortCompany"></i-input>
            </Form-Item>
            <Form-Item label="排序:">
                <i-input v-model="Sort.sortRow"></i-input>
            </Form-Item>
            <Form-Item label="是否显示导航栏:" :label-width="120">
                <i-switch :true-value="1" :false-value="0" v-model="Sort.sortState"/>
                <%--<Radio-Group v-model="Sort.sortState">--%>
                    <%--<Radio label="1">--%>
                        <%--<span>是</span>--%>
                    <%--</Radio>--%>
                    <%--<Radio label="0">--%>
                        <%--<span>否</span>--%>
                    <%--</Radio>--%>
                <%--</Radio-Group>--%>
            </Form-Item>
            <Form-Item label="是否显示该类别:" :label-width="120">
                <i-switch :true-value="1" :false-value="0" v-model="Sort.sortDisplay"/>
                <%--<Radio-Group v-model="Sort.sortDisplay">--%>
                    <%--<Radio label="1">--%>
                        <%--<span>是</span>--%>
                    <%--</Radio>--%>
                    <%--<Radio label="0">--%>
                        <%--<span>否</span>--%>
                    <%--</Radio>--%>
                <%--</Radio-Group>--%>
            </Form-Item>
        </i-form>
    </Modal>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                // {
                //     type: "selection",
                //     width: 60,
                //     align: "center"
                // },
                {title:"编号",key:"id"},
                {title:"分类名称",key:"sortName"},
                {title:"商品数量",slot:"sortNumber"},
                {title:"数量单位",key:"sortCompany"},
                {title:"导航栏",slot:"sortState"},
                {title:"是否显示",slot:"sortDisplay"},
                {title:"排序",key:"sortRow"},
                {title:"操作",slot:"action"}
            ],
            data:[],
            Sort:{},
            total1:{},
            pageSize:10,
            pageNo:1,
            modaladd:false,
            modalupdate:false
        },
        mounted(){
            this.getList();
        },
        methods: {
            getList(){
                axios.post(`/sys/cla/list/${this.pageSize}/${this.pageNo}`,this.Sort).then(
                    ({data})=>{
                        this.data=data.result.list;
                        this.total1 = data.result.total;
                    }
                )
            },
            dao(row,index) {
                if(row.sortState==1){
                    row.sortState=0;
                }else if(row.sortState==0){
                    row.sortState=1;
                }
                this.Sort=row;
                axios.post("/sys/cla/update",this.Sort)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg});
                        this.getList()
                    })
            },
            xian(row,index) {
                if(row.sortDisplay==1){
                    row.sortDisplay=0;
                }else if(row.sortDisplay==0){
                    row.sortDisplay=1;
                }
                this.Sort=row;
                axios.post("/sys/cla/update",this.Sort)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg});
                        this.getList()
                    })
            },
            noupdate(){
                iview.Message.info("已取消");
                this.getList()
            },
            add(){
                this.modaladd=true;
                this.Sort={}
            },
            doadd(){
                axios.post("/sys/cla/add",this.Sort)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg});
                        this.getList()
                    })
            },
            update(row,index){
                this.Sort=row;
                this.modalupdate=true
            },
            doupdate(){
                axios.post("/sys/cla/update",this.Sort)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg});
                        this.getList()
                    })
            },
            del(row,index){
                let _this = this;
                iview.Modal.confirm({
                    title:"确定是否要删除?",
                    content:"操作不可逆，删不删？",
                    onOk(){
                        axios.post("/sys/cla/delete?id="+row.id)
                            .then(({data})=>{
                                if(data.code==1000){
                                    iview.Message.success({content:data.msg});
                                    if(index==0){
                                        if(_this.pageNo!=1){
                                            _this.pageNo=_this.pageNo-1;
                                        }
                                    };
                                    _this.getList()
                                }else {
                                    iview.Message.error({content:data.msg});
                                }
                            })
                    },
                    onCancel(){
                        iview.Message.info("取消删除")
                    }
                })
            }


        }
    })
</script>
</body>
</html>
